<template>
  <div class="news_all">
    <div class="news_list">
      <ul class="news_pages">
        <li v-for="item in 5">
          <h4>
               <router-link class="title" to="/page/news/all">{{newsPage.title}}</router-link>
           </h4>
          <p class="des">{{newsPage.des}}</p>
          <p class="info">{{newsPage.info}}</p>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      newsPage: {
        title: "低碳建筑首选天然石材 环保健康受欢迎",
        link: "#",
        des: "所谓低碳经济，是指在可持续发展理念指导下，通过技术创新、制度创新、产业转型等多种手段，尽可能地减少煤炭石油等高碳能源消耗，减少排放，达到经济社会发展与生态环境保护双赢的一种经济发展形态。尽可能地减少煤炭石油等高碳能源消耗，减少排放，达到经济社会发展与生态环境保护双赢的一种经济发展形态。尽可能地减少煤炭石油等高碳能源消耗，减少排放，达到经济社会发展与生态环境保护双赢的一种经济发展形态...",
        date: "2018-03-28"
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}

</script>
<style lang='scss'>
.news_all {

  .news_list {
    background: #ffffff;
    padding: 30px;
    .news_pages {
      li {
        border-bottom: 1px solid #f0f2f5;
        padding-bottom: 30px;
        margin-bottom: 30px;
        h4 {
          font-size: 22px;
          margin-bottom: 20px;
          .title {
            color: #2a333c;
          }
        }
        .des {
          color: #76838f;
          font-size: 16px;
          font-weight: 300;
          margin-bottom: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .info {
          color: #a3afb7;
          font-size: 16px
        }
      }
    } // 分页
    .paging {
      text-align: center;
    }
  }
}

</style>
